<template>
	<div class="HomeFirstClassifyNew">
		<div v-if="dataList && dataList.length>0">
			<div class="classify_con" v-if="lcadStyle=='one'|| (lcadStyle=='two' && !classfyImg) ||( lcadStyle=='two' && !publicityPicture)">
				<div v-if="classfyTitle" class="classify_title">
					<h1>{{relTitle}}</h1>
					<p>{{relSubtitle}}</p>
				</div>
				<div v-if="classfyImg" class="classify_ad" style="padding-top: 0.75rem;">
					<img @click='jumpEven()' :src="publicityPicture || 'static/image/demo1.png'" />
				</div>
				<HomemScroll v-if="goodsNewVO.length>0" :goodsList="goodsNewVO">
				</HomemScroll>
			</div>
			<div class="classify_con" v-if="lcadStyle=='two' && classfyImg && publicityPicture">
				<div v-if="classfyTitle" class="classify_title">
					<h1>{{relTitle}}</h1>
					<p>{{relSubtitle}}</p>
				</div>
				<div v-if="classfyImg" style="padding-top: 0.75rem;position: relative;">
					<img style="position: absolute;width: 100%;" @click='jumpEven()' :src="publicityPicture || 'static/image/demo1.png'" />
					<HomemScroll class="cjscollgoods" v-if="goodsNewVO.length>0" :goodsList="goodsNewVO">
					</HomemScroll>
				</div>
			</div>
		</div>
		<div v-if="dataList.length==0 && env == 'edit'" style="height: 2.5rem;line-height: 2.5rem;">暂无数据</div>
	</div>
</template>

<script>
	import HomemScroll from "../RegularShowList";
	import { mapMutations } from "vuex";
	import { queryCart, queryGoodsList } from '@/utils/ReturnAxios'
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => []
			},
			config: {
				type: Object,
				default: ()=>{}
			},
		},
		data() {
			return {
				//标题
				relTitle: "",
				relSubtitle: "",
				//图片
				publicityPicture: "",
				urldata: "",
				//商品
				goodsNewVO: [],
			}
		},
		components: {
			HomemScroll
		},
		methods: {
			...mapMutations('xxy', [
				"setpopupVisible",
				"setactivePic",
			]),
			jumpEven() {
				// 弹出活动图
				if(this.urldata) {
					this.$router.push({
						path: this.urldata
					})
				}
			},
			classifydata() {
				this.relTitle = "";
				this.relSubtitle = "";
				this.publicityPicture = "";
				this.urldata = "";
				this.goodsNewVO = [];
				for(var i = 0; i < this.dataList.length; i++) {
					if(this.dataList[i].relPosition == "TITLE") {
						this.relTitle = this.dataList[i].relTitle
						this.relSubtitle = this.dataList[i].relSubtitle
					} else if(this.dataList[i].relPosition == "IMAGE") {
						this.publicityPicture = this.dataList[i].publicityPicture
						this.urldata = JSON.parse(this.dataList[i].extendField).url.path
					} else if(this.dataList[i].relPosition == "GOODS") {
						this.dataList[i].goodsNewVO.mainPic = this.dataList[i].publicityPicture
						this.goodsNewVO.push(this.dataList[i].goodsNewVO)
					}
				}
			}

		},
		mounted() {
			this.classifydata()
		},
		computed: {
			classfyTitle() {
				if(this.config.id) {
					return this.getCurrentVDONew(this.config.id, 1).config.classfyTitle;
				}
			},
			classfyImg() {
				if(this.config.id) {
					return this.getCurrentVDONew(this.config.id, 1).config.classfyImg;
				}
			},
			lcadStyle() {
				if(this.config.id) {
					if(parseInt(this.getCurrentVDONew(this.config.id, 1).config.lcadStyle) == 0) {
						return 'one';
					} else if(parseInt(this.getCurrentVDONew(this.config.id, 1).config.lcadStyle) == 1) {
						return 'two';
					} else {
						return 'one';
					}
				} else {
					return 'one';
				}
			},
			env() {
				return window.environment; // 获取是否是编辑状态
			},
		},
		watch: {
			dataList(data) {
				this.classifydata()
			},
		}
	}
</script>

<style>
	.classify_ad img {
		height: 7rem;
	}
	
	.HomeFirstClassifyNew .classify_title {
		padding-top: 0.75rem;
		padding-bottom: 0rem;
	}
	
	.HomeFirstClassifyNew .classify_con {
		margin-bottom: 0.3rem;
	}
	
	.HomeFirstClassifyNew .cjscollgoods {
		background-color: #fff;
		position: relative;
		margin: 7rem 0.75rem 0.75rem;
		overflow: hidden;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
</style>